* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
header, nav, section, article, aside, footer {
    display: block;
}
body {
    font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
    height: 100%;
}
a {
    color: blue;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
p {
    margin: 0 0 18px
}
img {
    border: none;
}
input {
    vertical-align: middle;
}
#wrapper {
    width: 100%;
    min-width: 1000px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
.hidden {display: none;}
.clear {clear: both;}

.w100per {width: 100%;}
.w750px {width: 750px;}
.w650px {width: 650px;}
.w50px {width: 50px;}
.w100px {width: 100px;}

/* Header
-----------------------------------------------------------------------------*/
#header {
    height: 140px;
    background: #31f21d;
    border-bottom: 5px solid #33597A;
    background: url("/img/bg-default.png");
}
#logo {
    background: url("/img/logo.png");
    background-repeat: no-repeat;
    width: 450px;
    height: 100px;
    margin: 0 30px;
}
#topNav {
    margin-left: 40px;
}
#topNav li {
    display: inline;
    padding-right: 10px;
    font-size: 18px;
    text-transform: uppercase;
}
#topNav a {
    color: white;
    outline: none;
    text-decoration: none;
}
#topNav .active a {
    color: #aaa;
    outline: none;
    text-decoration: none;
}
#topNav a:hover {
    text-decoration: underline;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
    width: 100%;
    padding: 0 0 100px;
    height: 1%;
    position: relative;
}
#middle:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
#container {
    width: 100%;
    float: left;
    overflow: hidden;
}
#content {
    padding: 5px 320px 10px 10px;
}


/* Sidebar Right
-----------------------------------------------------------------------------*/
#sideRight {
    float: left;
    margin-right: -3px;
    width: 300px;
    margin-left: -300px;
    position: relative;
    background: #e8e3e3;
}

#sideRight #memberBox {
    padding: 5px 10px;
}
#sideRight #memberMenu {
    margin-left: 15px;
}

/* Footer
-----------------------------------------------------------------------------*/
#footer {
    border-top: 5px solid #33597A;
    margin: -50px auto 0;
    min-width: 1000px;
    height: 50px;
    background: #3b5998;
    text-align: center;
    color: white;
}
#footer a {
    color: white;
    outline: none;
    text-decoration: none;
}
#footer a:hover {text-decoration: underline;}

/* Other
-----------------------------------------------------------------------------*/
.triangle {
    float: left;
    border-style: solid;
    border-width: 14px 14px 14px 14px;
    height: 0px;
    width: 0px;
}
.messageBox {
    min-width: 300px;
    padding: 5px 15px;
    float: left;
}
.messageBox.error {
    border-left: 4px solid red;
    background-color: pink;
}
.triangle.error {
    border-color: white white white pink;
}
.messageBox.success {
    border-left: 4px solid green;
    background-color: greenyellow;
}
.triangle.success {
    border-color: white white white greenyellow;
}
.spreadsheet {
    width: 100%;
    border: 1px solid grey;
    border-collapse: collapse;
}
.spreadsheet td {
    border: 1px solid grey;
    padding: 5px;
    background-color: #e3e2e2;
}
.spreadsheet th {
    border: 1px solid grey;
    background-color: #d6d5d5;
    font-weight: bold;
    padding: 5px;
}
.pageTitle {border-bottom: 2px solid #000033; width: 99%; margin: 5px auto 10px; padding-bottom: 5px;}
.pageTitle h1 {text-transform: uppercase; color: #000033; width: 50%; display: inline;}
.nav {text-align: center;}
.caption {font-weight: bold;}
.panelTitle {margin-bottom: 5px;}
.pageTitleLink {float: right;}
/* pAnime
-----------------------------------------------------------------------------*/
#pAnime .animeList {width: 90%; margin: 0 auto;}
#pAnime .listItem {height: 30px; border-bottom: 1px dashed grey; margin-top: 10px;}
#pAnime .listTitle {height: 30px; background-color: #ebe7e7; color: #000033;}
#pAnime .listTitle .field {margin-top: 5px; font-weight: bold;}
#pAnime .field {float: left;}
#pAnime .xCenter {text-align: center;}
#pAnimeView .animePoster {margin: 0 10px 10px 0; float: left;}
#pAnimeView .animeDetails {width: 90%; margin: 0 auto;}
/* pGroups
-----------------------------------------------------------------------------*/
#pGroups .groupList {width: 90%; margin: 0 auto;}
#pGroups .listItem {height: 30px; border-bottom: 1px dashed grey; margin-top: 10px;}
#pGroups .listTitle {height: 30px; background-color: #ebe7e7; color: #000033;}
#pGroups .listTitle .field {margin-top: 5px; font-weight: bold;}
#pGroups .field {float: left;}
#pGroups .xCenter {text-align: center;}
#pAnimeView .animePoster {margin: 0 10px 10px 0; float: left;}
#pAnimeView .animeDetails {width: 90%; margin: 0 auto;}
/* pIndex
-----------------------------------------------------------------------------*/
#pIndex .animeSlider {min-height: 200px; width: 890px; margin: 10px auto;}
#pIndex .siteStatistic {width: 900px; margin: 0 auto;}
#pIndex .siteStatistic .panel {float: left; min-height: 290px; width: 290px; background-color: #ebe7e7; margin: 0 5px;}
#pIndex .panel .panelTitle {padding: 10px; text-align: center; color: #000033;}
#pIndex .panel .panelWrapper {width: 270px; margin: 0 auto; border-top: 1px dashed #000033;}